<template>
  <div>
    <head-top goBack="true"></head-top>
    <div class="newPlaceholder"></div>
    <div>
      <div class="top-tab flexAround" style="height: 2.09rem">
        <span v-for="(item,index) in tabList" :key="index" @click="tab(index)" :class="{active:tabIndex==index}">{{item.name}}</span>
      </div>
      <div class="itemList"  v-infinite-scroll="getorderlist" infinite-scroll-disabled="loading" infinite-scroll-distance="10">

        <a v-for="(item,index) in orderlist" :key="index">
          <div class="head flexBetween">
            <span>兑换时间：{{item.CreateDate}}</span>
            <span>{{item.OrderState}}</span>
          </div>
          <div @click="godetail(item.Id)" class="main flex" v-for="(gift,g_index) in item.GiftList" :key="g_index">
            <div class="flexCenter">
              <img :src="gift.GiftImg" alt>
            </div>
            <div class="flexGrow">
              <div class="flexBetween">
                <span>{{gift.GiftName}}</span>
                <span>
                {{gift.IntegralValue}}
                <span>积分</span>
                <span>×</span>
                {{gift.GiftNum}}
              </span>
              </div>
              <div class="flexBetween">
                <span>分类：{{gift.GiftTypeName}}</span>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="flexBetween">
              <span>单号：{{item.OrderNum}}</span>
              <span>总计：
              <span>{{item.TotalIntegralValue}}</span> 积分
            </span>
            </div>
            <div class="closeOrder" v-if="item.OrderState=='未发货'">
              <span class="btn" @click="cancelorder(item.Id)">关闭订单</span>
            </div>
            <div class="checkOrder" v-else-if="item.OrderState=='已发货'">
              <span class="btn" @click="goLogisticsDetails(item.CourierNumber,item.AppUrlStr)">查看物流</span>
              <span class="btn" @click="confirmreceive(item.Id)">确认收货</span>
            </div>
            <div class="checkOrder" v-else-if="item.OrderState=='已收货'">
              <span class="btn" @click="goLogisticsDetails(item.CourierNumber,item.AppUrlStr)">查看物流</span>
            </div>
            <div class="checkOrder" v-else-if="item.OrderState=='已关闭'">
            </div>
          </div>
        </a>


        <div v-if="bottomLine" class="bottom-line flexCenter">
          <span></span>
          <span>没有更多数据哦</span>
          <span></span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import {Navbar, TabItem, Toast, MessageBox,InfiniteScroll} from "mint-ui";
  import {getStore} from "../../../config/mUtils";
  import headTop from "src/components/header/newHead";


  export default {
    name: "orderIndex",
    data() {
      return {
        userinfo: {},
        orderlist: [],
        selected: "0",
        tabIndex: 0,
        tabList: [
          {
            id: "0",
            name: "全部"
          },
          {
            id: "1",
            name: "未发货"
          },
          {
            id: "2",
            name: "已发货"
          },
          {
            id: "3",
            name: "已完成"
          }
        ],
        itemList: [],
        bottomLine:false,
        pageindex:1,
        loading:false
      }
    },
    computed: {},
    components: {
      headTop,
    },
    methods: {
      tab(index) {
        this.tabIndex = index;
        this.orderlist=[];
        this.pageindex=1;
        this.getorderlist()
      },
      getorderlist() {
        this.$axios
          .get("integral.user.getorderlist", {
            params: {
              eid: this.userinfo.EnterpriseId,
              OrderState: this.tabIndex,
              InuserId: this.userinfo.Id,
              PageIndex: this.pageindex,
              PageSize: 5
            }
          })
          .then(p => {
            if(p.data.result.PageData.length>0)
            {
              this.bottomLine=false;
            }
            else {
              this.bottomLine=true;
            }
            if(this.pageindex<=p.data.result.TotalPageCount)
            {
              this.loading = false;//可以加载
              this.pageindex++;
              this.orderlist= this.orderlist.concat(p.data.result.PageData);
            }
            else {
              this.loading = true;//不可以加载
              Toast({
                message: '没有数据啦',
                duration: 1500
              });
            }
          });
      },
      godetail(id) {
        this.$router.push({path: '/orderDetail', query: {'id': id}});
      },
      cancelorder(id) {
        MessageBox.confirm('确定关闭该订单吗?').then((res) => {
          if (res == 'confirm') {
            this.$axios.post('integral.user.cancelorder', {Id: id}).then((p) => {
              if (p.data.status == '10001') {
                Toast({
                  message: '关闭成功',
                  iconClass: 'iconfont icon-dui',
                  duration: 1500
                });
                this.tab(this.tabIndex);
              } else {
                Toast({
                  message: '关闭失败',
                  iconClass: 'iconfont icon-cuo',
                  duration: 1500
                });
              }
            })
          }
        }).catch(() => {
        });

      },
      confirmreceive(id) {
        MessageBox.confirm('亲，确定宝贝已经收到了吗?').then((res) => {
          if (res == 'confirm') {
            this.$axios.post('integral.user.confirmorder', {Id: id}).then((p) => {
              if (p.data.status == '10001') {
                Toast({
                  message: '收货成功',
                  iconClass: 'iconfont icon-dui',
                  duration: 1500
                });
                this.tab(this.tabIndex);
              } else {
                Toast({
                  message: '收货失败',
                  iconClass: 'iconfont icon-cuo',
                  duration: 1500
                });
              }
            })
          }
        });
      },
      goLogisticsDetails(CourierNumber, UrlStr) {
        window.location = "http://m.kuaidi100.com/result.jsp?com=" + UrlStr + "&nu=" + CourierNumber;
      }
    },
    created() {
      this.userinfo = getStore("userInfo");
      // this.getorderlist();
    },
    mounted() {
    }
  };
</script>

<style lang="scss" scoped>

  .top-tab {
    background: white;
    border-bottom: 1px dashed #E7EAED;
    span {
      font-size: 0.51rem;
      color: #666666;
      line-height: 1.96rem;
      height: 1.96rem;
    }
  }

  .active {
    border-bottom: 2px solid #3190E8;
    color: #3190E8 !important;
  }


  .itemList {
    /*padding-top: 2.1rem;*/
    > a {
      display: block;
      color: black;
      background-color: white;
      margin-bottom: 0.5rem;

      .head {
        padding: 0.26087rem 0.652174rem;

        > span:nth-child(1) {
          font-size: 0.521739rem;
          color: #888888;
        }

        > span:nth-child(2) {
          font-size: 0.608696rem;
          color: #00a0e9;
        }
      }

      .main {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 0.26087rem 0.652174rem;

        > div:nth-child(1) {
          width: 2.608696rem;
          height: 2.608696rem;
          overflow: hidden;

          > img {
            width: 100%;
          }
        }

        > div:nth-child(2) {
          padding-left: 0.652174rem;

          > div:nth-child(1) {
            margin-bottom: 0.217391rem;

            > span:nth-child(1) {
              font-size: 0.608696rem;
            }

            > span:nth-child(2) {
              font-size: 0.695652rem;
              color: #e51c23;

              > span {
                font-size: 0.521739rem;
                color: #888888;
              }
            }
          }

          > div:nth-child(2) {
            > span:nth-child(1) {
              font-size: 0.521739rem;
              color: #888888;
            }

            > span:nth-child(2) {
              font-size: 0.608696rem;
            }
          }
        }
      }

      .footer {
        padding: 0.26087rem 0.652174rem;

        > div:nth-child(1) {
          > span:nth-child(1) {
            font-size: 0.521739rem;
          }

          > span:nth-child(2) {
            font-size: 0.608696rem;
            color: #888888;

            > span {
              color: #e51c23;
            }
          }
        }

        .btn {
          color: #888;
          font-size: 0.608696rem;
          border: 1px solid #eee;
          border-radius: 0.217391rem;
          width: 3.478261rem;
          height: 1.304348rem;
          line-height: 1.304348rem;
          padding: 0;
        }

        > .closeOrder {
          text-align: right;
          margin-top: 0.26087rem;
        }

        > .checkOrder {
          text-align: right;
          margin-top: 0.26087rem;

          > span:nth-child(2) {
            color: white;
            background-color: #00a0e9;
            border: none;
          }
        }
      }
    }
  }


  .bottom-line{
    margin-top: 5rem;
    padding-bottom: 0.85rem;
    span:nth-child(1),span:nth-child(3){
      width: 2.13rem;
      height: 1px;
      background: #E7EAED;
      margin: 0 0.6rem;
    }
    span:nth-child(2){
      font-size: 0.51rem;
      color: #999;
    }
  }
</style>
